<template>
  <!--  我的发票-->
  <div>
    <div>
      <el-row style="background: white">
        <el-col :span="24"><div class="tbUpDiv"><img src="src/public/imgs/36)0DHOK%25J39%25~%25H9%5DTFO%60I.png" class="tbImg"><span class="tbUpPost">发票中心

           <span class="tjj-1">
<!--             <el-button color="#626aef" :dark="isDark"  >手动添加</el-button>-->

             <router-link to='/invoicetjjt'>
 <el-button color="#626aef" :dark="isDark" >手动添加</el-button>
</router-link>
           </span>







        </span></div></el-col>





      </el-row>

      <el-row>
        <el-col>
          <div class="tbScenDiv">
            <div style="display: flex;width: 900px;flex-direction: row;justify-content: space-between;">
              <span>发票类型：</span>

              <span class="Display_Search_Dept">

              <el-cascader  :options="options" ref="abc" @change="getLabel" v-model="d.invoiceTypeSelect" >
                <template #default="{ node, data }" >
                  <span>{{ data.label }}</span>
                  <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
                </template>
              </el-cascader>
            </span>

              <span class="Display_Search_Button">
              <el-button @click="search" style="margin-bottom: 10px">
                <el-icon><Search /></el-icon>
              </el-button>
            </span>


              <div class="tbScenCdiv">
                <span>开票日期：</span>
                <el-date-picker
                    v-model="d.invoiceOpendate"
                    value-format="YYYY-MM-DD"
                    placeholder="申请时间"
                    style="width: 300px"
                />



              </div>
              <div>
                <div class="tjj"><input class="tbScenAipt" v-model="d.invoiceSeller" placeholder="销售方名称"></div>
              </div>
              <div class="tbScenBdiv"><input class="tbScenAipt" v-model="d.invoiceNumber" placeholder="发票号码"></div>
            </div>

          </div>



        </el-col>
      </el-row>


      <el-tabs   type="border-card" v-model="activeName"

                 @tab-click="changePane"
                 class="demo-tabs">


        <el-tab-pane label="全部" name="all">

        </el-tab-pane>


        <el-tab-pane label="未报销" name="no">

        </el-tab-pane>


        <el-tab-pane label="已报销" name="also">

        </el-tab-pane>


        <div class="picture" data-v-309cad06="">

          <div class="typeface" data-v-309cad06="">
            <el-row>
              <el-col>
                <el-table :data="d.page.records" style="width: 100%">
                  <el-table-column prop="invoiceId" label="发票编号" width="100"/>
                  <el-table-column prop="invoiceType" label="发票类型" width="180" />

                  <el-table-column prop="invoiceAddtime" label="创建日期" width="280" />
                  <el-table-column prop="invoiceOpendate" label="开票日期" width="280" />
                  <el-table-column prop="invoiceNumber" label="发票号码" width="180" />
                  <el-table-column prop="invoiceSeller" label="销售方" width="180" />
                  <el-table-column prop="invoiceState" label="发票状态" width="180" />
                  <el-table-column prop="invoiceMoney" label="价税合计" width="180" />

                </el-table>
              </el-col>
            </el-row>
            <el-row justify="center">
              <el-col>

                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="d.page.current"
                    :page-sizes="[4,8]"
                    small="small"
                    :page-size="d.page.size"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="d.page.total"
                >
                </el-pagination>
              </el-col>
            </el-row>
          </div></div>

      </el-tabs>

    </div>
  </div>
</template>

<script  lang="ts" setup>


import {ref, reactive, toRefs, onBeforeMount, nextTick} from "vue";
import axios from "axios";

const options = [
  {
    value:'1',
    label:'全部',
  },
  {
    value:'2',
    label:'电子发票',
  },
  {
    value:'3',
    label:'普通发票',
  },
  {
    value:'4',
    label:'国际发票',
  },

]

const souForm=reactive({
  personnelTime:'',
  personnelTypet:'',

})
const hidddiv=ref(false)
const d = reactive({
  page: {
    records: [], //记录
    size: 4, //每页条数
    current: 1, //当前页
    total: 1, //总数
    pages: 1, //页数
  },
  invoiceState:'',//发票状态
  invoiceType:'',
  invoiceOpendate:'',
  invoiceNumber:'',
  invoiceSeller:'',

  invoiceTypeSelect:"",
  applyDate:[]
});


const {total,pageNo,pageSize} = toRefs(d);

// 默认点击进来就是全部页面
const activeName = ref('all')
const getList =()=>{

  let param={
    current:d.page.current,
    size:d.page.size,
    invoiceState:d.invoiceState,
    invoiceType:d.invoiceType,
    invoiceOpendate:d.invoiceOpendate,
    invoiceNumber:d.invoiceNumber,
    invoiceSeller:d.invoiceSeller,
  }
  axios.get('http://localhost:1688/selectInvoice/page',
      {
        params: param
      }).then(res=>{
    let obj=res.data.data;
    console.log(obj)
    d.page.records = obj.records;
    d.page.current = obj.current;
    d.page.total = obj.total;
    d.page.pages =obj.pages;
    d.page.size = obj.size;
  })

}


const search = (val) => {
  getList();
}

const getLabel = (val) => {
  let  invoiceTypeSelect=d.invoiceTypeSelect;
  if (invoiceTypeSelect=="1"){
    d.invoiceType='';
  }else  if (invoiceTypeSelect=="2")
  {
    d.invoiceType='电子发票';
  }
  else  if (invoiceTypeSelect=="3")
  {
    d.invoiceType='普通发票';
  }
  else  if (invoiceTypeSelect=="4")
  {
    d.invoiceType='国际发票';
  }
  // getList();
}






const handleSizeChange = (val) => {
  console.log(`每页 ${val} 条`);
  d.page.size=val;
  getList();
}

const handleCurrentChange = (val) => {
  console.log(`当前页: ${val}`);
  d.page.current=val;
  getList();
}

const changePane = (tab, event) => {
  d.page.current=1;

  if(tab.paneName == 'all'){
    d.invoiceState="";
  }else if(tab.paneName == 'no'){
    d.invoiceState="未报销";
  }else {
    d.invoiceState="已报销";
  }
  getList();

}



onBeforeMount(async ()=>{
  nextTick(()=>{
    getList();
  })
})


</script>

<style scoped>
.tbUpDiv{
  width: 100%;
  border-top: 1px solid gainsboro;
  border-bottom: 1px solid gainsboro;
  position: relative;

}
.tbImg{
  margin-left: 30px;
  margin-top: 15px;
}

.tbUpPost{
  position: relative;
  top: -19px;
  left: 20px;
}
.tbScenDiv{
  border-bottom: 1px solid gainsboro;
  /*position: relative;*/
  display: flex;
  justify-content: space-between;
}
.tbScenAdiv{
  /*width: 200px;*/
  /*margin-top: 10px;*/
  /*margin-left: 30px;*/
  font-size: 14px;
}
.tjj{
  position:relative;
  left:200px;
}
.tjj-1{
  margin: 0px 10px;
  position: relative;
  left: 820px;
}
.tbScenBdiv{
  position: relative;
  left: 180px;
  /*top: -34px;*/
  font-size: 14px;
  /*width: 400px;*/
}
.tbScenCdiv{
  /*position: relative;*/
  /*left: 400px;*/
  /*top: -69px;*/
  font-size: 14px;
  /*width: 400px;*/
}

.tbScenDdiv{
  /*position: relative;*/
  /*left: 660px;*/
  /*top: -98px;*/
  font-size: 14px;
  /*width: 400px;*/

}

.tbScenAipt{
  width: 150px;
  height: 30px;
  border: 1px solid gainsboro;
}

.tbScenBipt{
  /*width: 150px;*/
  /*height: 30px;*/
  position: absolute;

}

.tbFirstBu{
  height: 35px;
  /*margin-left: 100px;*/
  /*margin-top: -54px;*/
}

.tbhide{
}

</style>
